<template>
	<div class="dashboard-editor-container" style="margin-top: 110px;">
    <div class="dashboard-title t1">{{$t('dashboard.todaystatistics')}}</div>
    <div class="dashboard-card">
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.commitCount')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.commitOrderCount}}</div>
            <div>{{$t('dashboard.totalcommitCount')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.firstCommitOrderCount}}</div>
            <div>{{$t('dashboard.firstcommitCount')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.againCommitOrderCount}}</div>
            <div>{{$t('dashboard.againcommitCount')}}</div>
          </div>
        </div>
       
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.todayregstatistics')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.todayRegiterCount}}</div>
            <div>{{$t('dashboard.registcount')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.todayRegisterAndNoCommitOrder}}</div>
            <div>{{$t('dashboard.registuncommitcount')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.plantformRegStatistics')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.allRegiterCount}}</div>
            <div>{{$t('dashboard.totalRegCount')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.allRegisterAndNoCommitOrder}}</div>
            <div>{{$t('dashboard.totalRegUnCommitCount')}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-card">
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.approvalRejectCount')}}</span>
          <span style="display: inline-block; font-size: 16px;">{{$t('dashboard.rejectCount')}}:{{approvalData.rejectCount}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.rejectEngineCount}}</div>
            <div>{{$t('dashboard.sigleModel')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.modelRejectCount}}</div>
            <div>{{$t('dashboard.model')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.firstCheckRejectCount}}</div>
            <div>{{$t('dashboard.appr')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.repeatRejectCount}}</div>
            <div>{{$t('route.approvalReview')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.lastCheckRejectCount}}</div>
            <div>{{$t('dashboard.endAppr')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.orderApprovalingStatistics')}}</span>
        </div>
        <div class="card-bottom">
          
          <div class="card-bottom-item">
            <div>
              {{approvalData.fristCheckCount}}
              <span style="color: #b8ecfd;">/</span>
              {{approvalData.repeatCount}}
              <span style="color: #b8ecfd;">/</span>
              {{approvalData.finalCheckCount}}
            </div>
            <div><span style="font-size:12px;color:#3382a3;">[{{$t('dashboard.orderStatus1')}}]</span>{{$t('dashboard.approvalproccess')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>
              {{approvalData.fristNoGetCheckCount}}
              <span style="color: #b8ecfd;">/</span>
              {{approvalData.repeatNoGetCheckCount}}
              <span style="color: #b8ecfd;">/</span>
              {{approvalData.finalNoGetCheckCount}}
            </div>
            <div><span style="font-size:12px;color:#3382a3;">[{{$t('dashboard.orderStatus2')}}]</span>{{$t('dashboard.approvalproccess')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.approvalPassStatistic')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.firstCheckPassCount}}</div>
            <div>{{$t('dashboard.appr')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.repeatPassCount}}</div>
            <div>{{$t('route.approvalReview')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.lastCheckPassCount}}</div>
            <div>{{$t('dashboard.endAppr')}}</div>
          </div>
          
          <div class="card-bottom-item">
            <div>{{approvalData.engineCheckPassCount}}</div>
            <div>{{$t('dashboard.automatic')}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-card">
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.realTimeCount')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.firstPassRate}}</div>
            <div>{{$t('dashboard.currentDayRate')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.oneRushRate}}</div>
            <div>{{$t('dashboard.s1Rate')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.sevenRenewalRate}}</div>
            <div>{{$t('dashboard.weekdayRate')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.historicalOverdueRate}}</div>
            <div>{{$t('dashboard.historyRate')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card" style="visibility: hidden;">
      </div>
      <div class="box-card" style="visibility: hidden;">
      </div>
    </div>
    <div class="dashboard-title t2">{{$t('dashboard.last7dayData')}}</div>
    <bar-chart></bar-chart>
	</div>
</template>

<script>
  import first from '@/assets/images/first.png'
  import end from '@/assets/images/end.png'
  import loan from '@/assets/images/loan.png'
  import coll from '@/assets/images/coll.png'
  import other from '@/assets/images/other.png'
  import { toPercent } from 'utils/index';
  import { getTodayCount } from 'api/dashboard'
  import { getDict } from 'api/reportForm/index'
  export default {
    name: 'dashboard-editor',
    data() {
      return {
        first,
        end,
        loan,
        coll,
        other,
        num: 8,
        approvalData: {
          firstCommitOrderCount: 0, // 首借单量
          againCommitOrderCount: 0, // 续借单量
          commitOrderCount: 0, // 当天提交的订单量
          fristCheckCount: 0, // 初审审核中的量
          repeatCount: 0, // 复审审核中的量
          finalCheckCount: 0,   // 终审审核中
          fristNoGetCheckCount: 0, // 初审未领取的量
          repeatNoGetCheckCount: 0, // 复审未领取的量
          finalNoGetCheckCount: 0,  // 终审未领取
          rejectCount: 0, // 拒绝量
          rejectEngineCount: 0, // 引擎拒绝量
          firstCheckRejectCount: 0, // 初审拒绝量
          repeatRejectCount: 0, // 复审拒绝量
          lastCheckRejectCount: 0, // 终审拒绝的量
          firstCheckPassCount: 0, // 初审通过量
          repeatPassCount: 0, // 复审通过量
          lastCheckPassCount: 0, // 终审通过量
          todayRegiterCount: 0, // 当天的注册量
          allRegiterCount: 0, // 累计注册的总量
          todayRegisterAndNoCommitOrder: 0, // 今天注册未提单的
          allRegisterAndNoCommitOrder: 0, // 所有未提单的用户量
          modelRejectCount: 0, // 模型拒绝量
          firstPassRate: 0, // 当日首逾率
          oneRushRate: 0, // S1催回率
          sevenRenewalRate: 0, // 7天续贷率
          historicalOverdueRate: 0 // 历史逾期率
        }
      }
    },
    components: {
      'bar-chart': () => import('./barChart')
    },
    created() {
      getTodayCount()
      .then(res => {
        res.data.firstPassRate = toPercent(res.data.firstPassRate);
        res.data.oneRushRate = toPercent(res.data.oneRushRate);
        res.data.sevenRenewalRate = toPercent(res.data.sevenRenewalRate);
        res.data.historicalOverdueRate = toPercent(res.data.historicalOverdueRate);
        this.approvalData = Object.assign(this.approvalData, res.data);
      })
      // 获取报表定义
      getDict().then(res => {
        if (res.status === 200) {
          this.$store.dispatch("saveGetReportDefine", res.data)
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: "warning"
          });
        }
      })
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding-left: 10px;
  box-sizing: border-box;
  width: 100%;
  .dashboard-title {
    text-align: left;
    font-size: 20px;
    margin-left: 10px;
    line-height: 60px;
    font-weight: bold;
    position: relative;
    &.t1 {
      margin-top: -20px;
       &::after {
        content: '';
        position: absolute;
        left: -2px;
        bottom: 16px;
        height: 10px;
        background-color: #66cce9;
        width: 85px;
        z-index: -1;
      }  
    }
    &.t2 {
      margin-top: -10px;
       &::after {
        content: '';
        position: absolute;
        left: -2px;
        bottom: 16px;
        height: 10px;
        background-color: #66cce9;
        width: 157px;
        z-index: -1;
      }  
    }
   
    // background: #fff;

  }
  .dashboard-card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fff;
    .card-top {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #3382a3;
    }
    .card-center {
      width: 100%;
      text-align: center;
      line-height: 80px;
      font-size: 36px;
      font-weight: bold;
    }
    .card-bottom {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 80px;
      &.small {
        .card-bottom-item {
          text-align: center;
          div:nth-child(1){
            font-size: 12px;
            font-weight: bold;
          }
          div:nth-child(2) {
            font-size: 20px;
          }
          div:nth-child(3) {
            font-size: 12px;
          }
        }
      }
      .card-bottom-item {
        text-align: center;
        div:nth-child(1){
          font-size: 22px;
          font-weight: bold;
        }
        div:nth-child(2) {
          font-size: 12px;
        }
      }
    }
  }
}
@media screen and (min-width: 481px) {
  .box-card {
    width: 32%;
    height: 110px;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-image: linear-gradient(90deg, #7be6f8,#5ebde9);
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-sizing: border-box;
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }
}
@media screen and (max-width:480px){
  .dashboard-editor-container {
    padding-left: 0;
    width: 100%;
  }
  .box-card {
    width: 90%;
    height: 110px;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-image: linear-gradient(90deg, #7be6f8,#5ebde9);
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-sizing: border-box;
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }
}
.icon>img {
  width: 58px;
}
.info {
  text-align: right;
  cursor: pointer;
}
.info-appr {
  cursor: pointer;
}
.title {
  text-align: right;
  font-size: 22px;
  color: #696b6e;
  padding-bottom: 5px;
}
.go {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 4px;
  width: 0;
  top: 0;
  border-color:#dfe4ec #dfe4ec transparent transparent;
  border-width: 20px 20px 20px 20px;
  border-style: solid;
  cursor: pointer;
}
.text {
  position: absolute;
  right: 3px;
  top: 2px;
  color: #fff;
  cursor: pointer;
}
.item {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: #aaa;
  padding-top: 5px;
  span {
    &:nth-child(1) {
      display: inline-block;
      width: 115px;
      text-align: right;
    }
    &:nth-child(2) {
      display: inline-block;
      text-align: left;
      color: #4d9dff;
      font-weight: bold;
    }
  }
}
.appr-data {
  margin-bottom: 20px;
  .title {
    line-height: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-weight: bold;
  }
  .title:before{
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background-color: #309afe;
  }
  .title:before {
    margin-right: 8px;
  }
  ::before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .appr-item {
    color: #aaa;
    font-size: 16px;
    span {
      display: inline-block;
      line-height: 25px;
      &:nth-child(1) {
        width: 150px;
        text-align: right;
      }
      &:nth-child(2) {
        display: inline-block;
        text-align: left;
        color: #4d9dff;
        font-weight: bold;
      }
    }
  }
}
</style>
